<template>
  <!-- 聊天内容区 -->
  <el-scrollbar ref="messageScroll" class="message-scroll">
    <div class="message-list">
      <div v-for="(msg, index) in messageList" :key="index">
        <div class="message-item" :class="{ 'message-right': msg.isSelf }">
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
          <div class="message-content">
            <div class="message-bubble">{{ msg?.content ?? "dfdsfsdf" }}</div>
            <div class="message-time">{{ msg?.time ?? "dfdsfsdf" }}</div>
          </div>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import { ref, reactive } from "vue";

const searchText = ref("");
const inputMessage = ref("");
const currentContact = ref(null);
const messageScroll = ref(null);
const userAvatar = "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png";

// 模拟联系人数据
const contactList = reactive([
  {
    id: 1,
    name: "张三",
    avatar: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
    lastMessage: "你好啊",
    time: "12:30",
  },
  // 可以添加更多联系人...
]);

// 模拟消息数据
const messageList = reactive([
  {
    content: "你好啊",
    time: "12:30",
    isSelf: false,
  },
  {
    content: "最近怎么样？",
    time: "12:31",
    isSelf: true,
  },
]);

// 选择联系人
const selectContact = (contact) => {
  currentContact.value = contact;
};

// 发送消息
const sendMessage = () => {
  if (!inputMessage.value.trim()) return;

  messageList.push({
    content: inputMessage.value,
    time: new Date().toLocaleTimeString("zh-CN", { hour12: false }),
    isSelf: true,
  });

  inputMessage.value = "";

  // 滚动到底部
  setTimeout(() => {
    messageScroll.value.setScrollTop(99999);
  }, 10);
};
</script>

<style lang="scss" scoped>
.chat-header {
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
  border-bottom: 1px solid #eee;

  .chat-title {
    font-size: 16px;
    font-weight: 500;
  }
}

.message-scroll {
  flex: 1;
  height: 0;
  padding: 20px;
}

.message-item {
  display: flex;
  margin-bottom: 20px;
  gap: 12px;

  &.message-right {
    flex-direction: row-reverse;

    .message-content {
      align-items: flex-end;

      .message-bubble {
        background: #95ec69;
      }
    }
  }

  .message-content {
    display: flex;
    flex-direction: column;
    max-width: 70%;

    .message-bubble {
      padding: 10px 15px;
      background: #f0f2f5;
      border-radius: 4px;
      word-break: break-all;
      line-height: 1.4;
    }

    .message-time {
      font-size: 12px;
      color: #999;
      margin-top: 4px;
    }
  }
}

.chat-footer {
  border-top: 1px solid #eee;
  padding: 10px;

  .toolbar {
    margin-bottom: 10px;
  }

  .send-box {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }
}

.no-chat {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
